<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>轮播图实现02</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .lunbo {
            width: 50%;
            height: 720px;
            margin: 50px auto;
            background-image: url(images/1.jpg);
            /*背景图片*/
            background-size: 100% 100%;
        }
    </style>
</head>

<body>
    <div class="lunbo">

    </div>
    <script type="text/javascript">
        var index = 1;

        function lunbo() {
            index++;
            //判断number是否大于3
            if (index > 3) {
                index = 1;
            }
            //获取img对象
            var img = document.getElementsByClassName("lunbo")[0];
            img.style.background = "url(images/" + index + ".jpg)";
            img.style.backgroundSize = "100% 100%";
        }
        //2.定义定时器
        setInterval(lunbo, 1000);
    </script>
</body>

</html>